<template>
  <div class="playsongbox">
    <div class="box">
      <div class="left">
        <div class="leftbox">
          <div class="lefttop" v-if="songsdata.songs">
            <div class="leftimg">
              <img :src="songsdata.songs[0].al.picUrl" alt="" class="img1" />
              <span class="bgimg1"></span>
            </div>
            <div class="rightdata">
              <div class="btn btn1">
                <p class="btn1-1"></p>
                <p class="btn1-2">
                  <span class="songname">{{ songsdata.songs[0].name }}</span>
                  <span class="img2"></span>
                </p>
              </div>
              <div class="btn btn2">
                <p class="singer">歌手</p>
                <p class="singername">{{ songsdata.songs[0].ar[0].name }}</p>
              </div>
              <div class="btn btn3">
                <p class="singer">所属专辑</p>
                <p class="singername">{{ songsdata.songs[0].al.name }}</p>
              </div>
              <div class="btn btn4">
                <a href="#" class="btn4a a1">
                  <span class="a-img1" @click="playsongs()">
                    <a href="#" class="actionbtn"></a>
                    <a href="#" class="actiontext">播放</a>
                  </span>
                  <span class="a-img2"></span>
                </a>
                <a href="#" class="btn4a a2">
                  <span class="a2-span">(11万)</span>
                </a>
                <a href="#" class="btn4a a3">
                  <span class="a2-span">(1万)</span>
                </a>
                <a href="#" class="btn4a a4">
                  <span class="a2-span">下载</span>
                </a>
                <a href="#" class="btn4a a5">
                  <span class="a2-span">(100)</span>
                </a>
              </div>
              <div class="btn btn5">
                <p v-for="(data,index) in lyricdata" :key="index">{{ data }}</p>
              </div>
            </div>
          </div>
          <div class="leftbody">
            <!-- <audio :src="playdata.url" controls="controls"></audio> -->
          </div>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      songsid: 0,
      songsdata: [],
      // 歌词数据
      lyricdata: '',
      // 歌曲播放信息
      playdata: []
    }
  },
  mounted () {
    // this.songsid = 0;
    // 获取歌曲id
    // var l = this.$route.params.id
    this.songsid = this.$route.params.id
    this.$bus.$on('updata', () => {
      // location. reload();
      this.songsid = this.$route.params.id
      this.getsongsdata()
      this.getlyric()
    })
    // 获取歌曲详情
    this.getsongsdata()
    // 获取歌词
    this.getlyric()
  },
  methods: {
    // 获取歌曲详情
    getsongsdata () {
      this.maxaxios.get('/song/detail', { ids: this.songsid }).then((res) => {
        this.songsdata = res
        // console.log(this.songsdata);
      })
    },
    // 获取歌词
    getlyric () {
      this.maxaxios.get('/lyric', { id: this.songsid }).then((res) => {
        this.lyricdata = res.lrc.lyric.replace(/\W\d{2}:\d{2}.\d{2,3}\W/g, '-').split('-')
      })
    },
    // 播放音乐
    playsongs () {
      this.maxaxios
        .get('/song/url', { id: this.songsdata.songs[0].id })
        .then((res) => {
          // console.log(res.data[0]);
          this.playdata = res.data[0]
          localStorage.clear('songurl')
          localStorage.setItem('songurl', this.playdata.url)
          localStorage.setItem('songid', this.songsdata.songs[0].id)
          // 实时传递
          this.$store.commit('ChangePlaySongsData', this.songsdata.songs[0])
          this.$store.commit('ChangePlaySongsURL', this.playdata.url)
          this.$nextTick(() => {
            this.$bus.$emit('PlaySongs')
          })
        })
    }
  }
}
</script>

<style scoped>
.playsongbox {
  width: 100%;
  background-color: #f5f5f5;
}
.box {
  width: 1000px;
  margin: auto;
  background-color: white;
  border: 1px solid #d3d3d3;
  position: relative;
}
.left {
  width: 750px;
  float: left;
}
.right {
  width: 250px;
  float: left;
}
.box::after {
  content: "";
  clear: both;
  display: block;
}
.leftbox {
  padding: 45px 40px 45px 45px;
}
.lefttop::after {
  content: "";
  clear: both;
  display: block;
}
.leftimg {
  width: 198px;
  height: 198px;
  float: left;
  /* background-color: rgb(137, 205, 36); */
  position: relative;
}
.img1 {
  width: 130px;
  height: 130px;
  margin: 34px;
}
.bgimg1 {
  width: 206px;
  height: 205px;
  top: -4px;
  left: -4px;
  background-position: -140px -580px;
  position: absolute;
  background-image: url(../../../../public/img/coverall.png);
}
.rightdata {
  width: 414px;
  float: right;
  /* background-color: rgb(36, 205, 81); */
}
.btn {
  width: 414px;
  /* height: 40px; */
}
.btn1 {
  height: 32px;
  /* background-color: red; */
}
.btn1::after {
  content: "";
  clear: both;
  display: block;
}
.btn1-1 {
  width: 57px;
  height: 24px;
  /* background-color: aqua; */
  float: left;
  background-position: 0 -463px;
  background-repeat: no-repeat;
  background-image: url(../../../../public/img/icon.png);
  margin-top: 4px;
}
.btn1-2 {
  width: 347px;
  height: 100%;
  /* background-color: rgb(0, 255, 55); */
  float: left;
  padding-left: 10px;
}
.songname {
  line-height: 32px;
  display: inline-block;
  font-size: 24px;
  padding-right: 10px;
}
.img2 {
  width: 21px;
  height: 18px;
  display: inline-block;
  background-position: 0 -18px;
  background-repeat: no-repeat;
  background-image: url(../../../../public/img/icon.png);
}
.btn2 {
  margin: 10px 0;
  height: 16px;
  line-height: 16px;
  /* background-color: rgb(255, 247, 0); */
}
.btn3 {
  margin: 10px 0;
  height: 16px;
  line-height: 16px;
  /* background-color: rgb(9, 255, 0); */
}
.singer {
  display: inline-block;
  margin-right: 5px;
}
.singername {
  display: inline-block;
  color: #0c73c2;
}
.btn4 {
  height: 32px;
  margin-bottom: 40px;
  /* background-color: rgb(0, 242, 255); */
}
.btn4a {
  width: 50px;
  height: 31px;
  float: left;
  display: block;
}
.a1 {
  width: 91px;
  height: 31px;
  /* background-color: #9b0909; */
  margin-right: 5px;
}
.a1::after {
  content: "";
  clear: both;
  display: block;
}
.a-img1 {
  display: inline-block;
  width: 60px;
  height: 31px;
  /* background-color: #9b0996; */
  background-position: 0 -387px;
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
}
.a-img1::after {
  content: "";
  clear: both;
  display: block;
}
.actionbtn {
  width: 20px;
  height: 18px;
  display: inline-block;
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1622px;
  float: left;
  margin: 6px 2px 2px 5px;
}
.actiontext {
  display: inline-block;
  float: left;
  line-height: 31px;
  color: white;
  font-size: 12px;
}
.a-img2 {
  display: inline-block;
  width: 30px;
  height: 31px;
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1588px;
  margin-left: 1px;
}
.a2 {
  width: 70px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -977px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.a2-span {
  font-size: 12px;
  display: inline-block;
  line-height: 31px;
  position: absolute;
  left: 25px;
}
.a3 {
  width: 70px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1225px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.a4 {
  width: 60px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -2761px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.a5 {
  width: 70px;
  /* background-color: #439b09; */
  background-image: url(../../../../public/img/button2.png);
  background-repeat: no-repeat;
  background-position: 0 -1465px;
  position: relative;
  margin-right: 5px;
  border-radius: 5px;
}
.btn5 {
  width: 156px;
  /* height: 327px; */
  /* background-color: rgb(0, 26, 255); */
  /* overflow: hidden; */
}
.btn5 p {
  font-size: 12px;
}
.leftbody {
  margin-top: 40px;
}
</style>
